<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旋转木马</title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="css/layout-957f85f036.css"/>
	</head>
	<body>
		<div class="g-carousel-wrap g-carousel-wrap1" data-setting='{"width":0.9,"height":300,"posterWidth":600,"posterHeight":300,"scale":0.9,"speed":500,"autoPlay":true,"delay":5000,"verticalAlign":"top"}'>
			<ul class="g-carousel-list">
				<li class="g-carousel-item"><img src="imgs/1-1.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/1-2.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/1-3.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/1-4.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/1-5.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/1-6.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/1-7.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/1-8.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/1-9.jpg" width="100%" height="100%" alt="" /></li>
			</ul>
			<div class="g-carousel-btnbox">
				<button class="g-carousel-btn g-carousel-btn-prev "></button>
				<button class="g-carousel-btn g-carousel-btn-next "></button>
			</div>
		</div>
		<div class="g-carousel-wrap" data-setting='{"width":800,"height":600,"posterWidth":300,"posterHeight":420,"scale":0.9,"speed":500,"autoPlay":true,"delay":5000,"verticalAlign":"middle"}'>
			<ul class="g-carousel-list">
				<li class="g-carousel-item"><img src="imgs/2-1.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/2-2.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/2-3.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/2-4.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/2-5.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/2-6.jpg" width="100%" height="100%" alt="" /></li>	
				<li class="g-carousel-item"><img src="imgs/2-7.jpg" width="100%" height="100%" alt="" /></li>	
			</ul>
			<div class="g-carousel-btnbox">
				<button class="g-carousel-btn g-carousel-btn-prev "></button>
				<button class="g-carousel-btn g-carousel-btn-next "></button>
			</div>
		</div>		
		<div class="g-carousel-wrap" data-setting='{"width":1000,"height":400,"posterWidth":658,"posterHeight":400,"scale":0.9,"opacity":0.2,"speed":500,"autoPlay":true,"delay":5000,"verticalAlign":"bottom","btnHover":false}'>
			<ul class="g-carousel-list">
				<li class="g-carousel-item"><img src="imgs/3-1.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/3-2.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/3-3.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/3-4.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/3-5.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/3-6.jpg" width="100%" height="100%" alt="" /></li>	
			</ul>
			<div class="g-carousel-btnbox">
				<button class="g-carousel-btn g-carousel-btn-prev "></button>
				<button class="g-carousel-btn g-carousel-btn-next "></button>
			</div>
		</div>
		
		<div class="g-carousel-wrap" data-setting='{"width":800,"height":800,"posterWidth":658,"posterHeight":493,"scale":1,"speed":500,"autoPlay":true,"delay":5000,"verticalAlign":"middle","Tile":true}'>
			<ul class="g-carousel-list">
				<li class="g-carousel-item"><img src="imgs/4-1.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/4-2.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/4-3.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/4-4.jpg" width="100%" height="100%" alt="" /></li>
				<li class="g-carousel-item"><img src="imgs/4-5.jpg" width="100%" height="100%" alt="" /></li>
			</ul>
			<div class="g-carousel-btnbox">
				<button class="g-carousel-btn g-carousel-btn-prev "></button>
				<button class="g-carousel-btn g-carousel-btn-next "></button>
			</div>
		</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/main-ee43f4e073.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">			
			xplCarousel.init(".g-carousel-wrap");
			/*
			 * 参数说明 放置在每个轮播g-carousel-wrap所在标签的data-setting属性里格式是json格式
			 {
				"width": 1000, //幻灯片的宽度 可以是百分比（0-1）
				"height": 270, //幻灯片的高度
				"posterWidth": 640, //幻灯片第一张图片的宽度
				"posterHeight": 270, //幻灯片第一张图片的高度
				"scale": 0.9, //记录显示比例关系
				"speed": 500,//图片切换速度
				"autoPlay": true,//是否自动播放
				"delay": 5000,//图片自动播放间隔时间
				"verticalAlign": "middle" //top bottom图片对齐
				"btnHover": false //控制按钮是否通过hover要显示
				"Tile":false //是否平铺,ture的话最外围的宽度会跟图片宽度一致
			}*/
		</script>
	</body>
</html>
